<template>
    <div>
        <a-modal
            :dialog-style="{ top: '40px' }"
            title="选取审评章节"
            :visible="visible"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="visible = false"
            :width="600"
        >
            <template slot="title">
                <div style="width: 100%;display: flex;text-align: center;">
                    <span style="font-size: 18px;font-weight: 600;text-align: center;">选取审评章节</span>
                </div>
            </template>
            <commpVxeTable
                :key="dataTableKey"
                :adaptiveHeight="true"
                :config="dataTableConfig" 
                :columns="columnsVxe" 
                :formItem="formItem"
                ref="acceptanceRegistrationRef"
            >
                <!-- <template v-slot:operation_realname="{row}" data-desc="姓名">
                    <span style="padding-right: 21;" v-if="row.realname && row.name.length == 2">
                        <span v-for="(trem,tI) in row.name.split('')" :key="tI" >
                            {{trem}}
                            <span v-if="tI+1 !== row.name.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.name }}</span>
                </template> -->
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item v-if="row.bz == '添加'">
                            <a-button class="green-btn" type="primary" icon="plus" @click="operateClick(row,'添加')">添加</a-button>
                        </a-form-item>
                        <a-form-item v-else>
                            <a-button class="red-btn" type="primary" icon="minus-circle" @click="operateClick(row,'移除')">移除</a-button>
                        </a-form-item>
                    </a-form>
                </template>
            </commpVxeTable>
            <template slot="footer">
                <div style="display: flex;justify-content: center;">
                    <a-button @click="handleOk" type="primary">关闭</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    spcygetXcjcFprwZjList,
    spcygetXcjcRwfpPersonList,
    spcymodifyXcjcZjInFzr,
    spcysubmitXcjcRyfp,
    spcygetXcjcRwfpPersonAdd,
    spcygetXcjcRwfpPersonRemove,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
export default {
    components:{
        commpVxeTable
    },
    props:{

    },
    data(){
        return{
            currentData:{},
            visible:false,
            chapterList:[],
            headList:[],
            spinning:false,
            spinningKey:null,
            dataTableConfig: {
              api: assessCheckApi.spcygetRwfpRyZjList,
              rowId: 'id',
              height:window.innerHeight - 260,
              autoHidden:true,
              pageSize:100000,
              paramet:{}
          },
          formItem: [],
          dataTableKey:null,
          columnsVxe: [{
                title: '审评章节',
                field: 'zjmc',
            },{
                title: '操作',
                field: 'userid',
                slots: {
                // 使用插槽模板渲染
                default: 'operation_btn',
                },
                fixed: 'right',
                width:90,
            }],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.currentData = val
            this.dataTableConfig.paramet = {
                ...val
            }
            this.dataTableKey = Date.now()
        },
        //分配
        allocationClick(row){
            
        },
        headChange(val,item){
            //console.log(val)
            spcymodifyXcjcZjInFzr({fxcjczjid:item.id,userid:val,sqsxid:this.currentData.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.getData(this.currentData)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        handleOk(){
            this.visible = false
        },
        operateClick(row,val){
            if(val == '添加'){
                spcygetXcjcRwfpPersonAdd({...this.currentData,id:row.id}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('operationSuccess')
                        this.$refs.acceptanceRegistrationRef.searchEvent()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                spcygetXcjcRwfpPersonRemove({...this.currentData,id:row.id}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('operationSuccess')
                        this.$refs.acceptanceRegistrationRef.searchEvent()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }

        },
    }
}
</script>
<style lang="less">
.chapter-head-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    .chapter-head-for-v{
        width: 40%;
        display: flex;
        justify-content: center;
        padding: 5px 10px;
        border-bottom: 1px solid #d9d9d9;
        .fzjmc-text{
            flex: 1;
        }
    }
}

</style>